<template>
  <div class="app-container video-detail-container">
    <h1 v-show="isEmpty()">暂无数据</h1>
    <div><span class="left-tip">编号</span><span class="right-content">{{ video.id }}</span></div>
    <div><span class="left-tip">标题</span><span class="right-content">{{ video.title }}</span></div>
    <div><span class="left-tip">描述</span><span class="right-content">{{ video.description }}</span></div>
    <div>
      <!--  width="320" height="240" -->
      <video max-width="50%" controls>
        <source v-bind:src="require('@/assets/video/小医仙1.mp4')" type="video/mp4">
        <source v-bind:src="require('@/assets/video/小医仙1.mp4')" type="video/ogg">
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <div>
      <span class="left-tip">封面</span><span class="right-content">
        <!-- 页面中变成了 /static/img/a2.f5793d53.jpg -->
        <img :src="require('@/assets/images/video/a2.jpg')" width="300px" />
      </span>
    </div>
    <div><span class="left-tip">点赞</span><span class="right-content">{{ video.vote }}</span></div>
    <div><span class="left-tip">创建时间</span><span class="right-content">{{ video.createTime }}</span></div>
    <div><span class="left-tip">更新时间</span><span class="right-content">{{ video.updateTime }}</span></div>
    <div><span class="left-tip">状态</span><span class="right-content">{{ video.status }}</span></div>
  </div>
</template>

<script>
import { fetchVideo } from '@/api/video'
import { jsError } from '@/api/js-error'

export default {
  name: 'VideoDetail',
  // filters: {
  //   isEmpty() {
  //     return this.video == null || this.video == undefined || this.video.keys.length == 0;
  //   }
  // },
  data() {
    return {
      video: {}
    }
  },
  created() {
    this.getVideoData(parseInt(this.$route.params.id) || 0)
  },
  methods: {
    isEmpty() {
      return this.video === null || this.video === undefined || Object.keys(this.video).length === 0
    },
    getVideoData(id) {
      fetchVideo(id)
        .then(data => {
          if (data.code === 20000) {
            this.video = data.data
          }
        })
        .catch(err => {
          jsError({
            filename: 'video.list.vue',
            title: 'deleteVideo(' + id + ')',
            message: err.message
          })
        })
    }
  }
}
</script>

<style scoped>
  /*.edit-input {*/
  /*  padding-right: 100px;*/
  /*}*/
  /*.cancel-btn {*/
  /*  position: absolute;*/
  /*  right: 15px;*/
  /*  top: 10px;*/
  /*}*/
  /*.department {*/
  /*  text-indent: 2em;*/
  /*}*/
</style>
